<template>
	<view class="content">
		<CustomNav :isBack="true" :custom="custom" :title="'查看面试邀请'"></CustomNav>
		<view :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+60)+'rpx;'" class="name">
			{{title}}
		</view>
		<view class="info-block">
			<view class="company-block">
				<image :src="data.comRecruiters.enterprise.logoUrl" class="company-logo"
					v-if="data.comRecruiters.enterprise.logoUrl&&data.comRecruiters.enterprise.logoUrl!=='null'">
				</image>
				<image
					src="https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/index/enterprise-icon.png"
					class="company-logo" v-else>
				</image>
				<view class="company-info">
					<view class="company-name">{{detail.comRecruiters.enterprise.brandName}}</view>
					<view class="hr-info">
						<image :src="detail.comRecruiters.user.faceUrl" class="hr-photo"></image>
						<view v-show="detail.comRecruiters" class="hr-name">{{detail.comRecruiters.realName}} ·
							{{detail.comRecruiters.comPosition}}
						</view>
					</view>
				</view>
			</view>
			<view class="interview-block">
				<view class="info-item">
					<view class="info-label">时间</view>
					<view class="info-value">{{detail.interviewTime}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">职位</view>
					<view v-show="detail.jobPublish" class="info-value">{{detail.jobPublish.jobTitle}} ·
						{{detail.jobPublish.minSalary}}-{{detail.jobPublish.maxSalary}}元
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">联系人</view>
					<view class="info-value">{{detail.comRecruiters.realName}}</view>
					<view v-if="!isMine" @click="call()" class="call">
						<view class="iconfont icon-boda"></view>呼叫
					</view>
				</view>
			</view>
		</view>
		<view v-if="detail.plan==1&&!isMine" class="button-block">
			<view @click="handleInterview(1)" class="button refuse">拒绝面试</view>
			<view @click="handleInterview(2)" class="button success">接受面试</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '../components/CustomNav/CustomNav';
	import {
		getInterview,
		submitInterview
	} from '@/api/interview.js';
	import {
		getCustomNavData
	} from '@/util/util.js'
	export default {
		data() {
			return {
				custom: null,
				id: null,
				isMine: false,
				detail: {

				},
				title: '',
				userID: '', //对方userID
			}
		},
		methods: {
			//打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: this.detail.comRecruiters.user.mobile
				})
			},
			//获取面试信息
			getInterviewDetail(id) {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				getInterview({
					id
				}).then((res) => {
					uni.hideLoading()
					this.detail = res;
					this.getTitle();
				}).catch((res) => {
					uni.hideLoading()
					this.showToast('加载失败，请稍后重试', () => {
						uni.navigateBack()
					})
				})
			},
			getTitle() {
				let title = '';
				const plan = this.detail.plan;
				const isMine = this.isMine;
				switch (plan) {
					case 1:
						title = isMine ? '面试邀请已发送，等待对方回应' : '对方邀请您视频面试';
						break;
					case 2:
						title = isMine ? '对方已同意面试邀请，请按时参加' : '您已同意面试邀请，请按时参加';
						break;
					case 3:
						title = '面试已结束';
						break;
					case 4:
						title = isMine ? '对方拒绝了面试邀请' : '您拒绝了面试邀请';
						break;
				}
				this.title = title;
			},
			//处理同意和拒绝逻辑
			handleInterview(type) {
				let plan;
				let para = {
					cancelText: '我再想想',
					success: (confirm) => {
						if (confirm.confirm) {
							uni.showLoading({
								title: '提交中',
								mask: true
							})
							submitInterview({
								id: this.id,
								plan
							}).then((res) => {
								const agree = plan == 4 ? false : true;
								const message = uni.$TUIKit.createTextMessage({
									to: this.userID,
									conversationType: uni.$TUIKitTIM.TYPES.CONV_C2C,
									payload: {
										text: plan == 4 ? '拒绝面试邀请' : '接受面试邀请'
									}
								})
								uni.$TUIKit.sendMessage(message).then((messageRes) => {
									uni.$emit('updateMessageList', message)
									uni.$emit('interviewHandle', {
										agree,
										id: this.id
									});
									this.showToast('操作成功', () => {
										uni.navigateBack()
									})
								}).catch(() => {
									this.showToast('操作失败，请重试！');
								})
							}).catch((res) => {
								uni.hideLoading();
								this.showToast('操作失败')
							})
						}
					}
				}
				if (type == 1) {
					plan = 4;
					para.title = '提示';
					para.content = '确定拒绝面试吗'
					para.confirmText = '我确定';
				} else {
					plan = 2;
					para.title = '面试诚信原则';
					para.content = '面试前3小时，双方可申请取消\n如不取消，请按时出席\n爽约乙方，平台会打【不良记录】'
					para.confirmText = '不爽约';
				}
				uni.showModal(para);
			}
		},
		components: {
			CustomNav,
		},
		onLoad(e) {
			this.userID = e.userID; //对方userID，只能在非发起者时使用
			this.custom = getCustomNavData();
			this.id = e.id; //面试的id
			this.isMine = e.isMine == 'true' ? true : false; //是否为发起者
			this.getInterviewDetail(e.id);
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(#0256FF, #f8f8f8, #f8f8f8, #f8f8f8);
		overflow: hidden;
		min-height: 100vh;
	}

	.name {
		font-size: 42rpx;
		color: #fff;
		position: relative;
		padding: 0 40rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.info-block {
		width: calc(100% - 60rpx);
		margin: 0 auto;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 40rpx;
		padding: 40rpx;

		.company-block {
			display: flex;
			flex-direction: row;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #efefef;
			align-items: center;

			.company-logo {
				width: 125rpx;
				height: 125rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.company-info {
				height: 125rpx;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.company-name {
					font-size: 36rpx;
					font-weight: bold;
				}

				.hr-info {
					display: flex;
					flex-direction: row;
					align-items: center;

					.hr-photo {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}

					.hr-name {
						font-size: 26rpx;
					}
				}
			}
		}

		.interview-block {
			width: 100%;

			.info-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 80rpx;

				.info-label {
					width: 130rpx;
					color: #404040;
				}

				.info-value {
					flex-grow: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.iconfont {
					color: #999;
					font-size: 28rpx;
				}
			}

			.info-item:nth-child(3) {
				.info-value {
					flex-grow: 0;
				}

				.call {
					display: flex;
					margin-left: 12rpx;
					flex-direction: row;
					align-items: center;
					color: #0256FF;
					border-radius: 10rpx;
					border: 1px solid #0256FF;
					font-size: 28rpx;
					padding: 5rpx 10rpx;

					.iconfont {
						color: #0256FF;
						font-size: 28rpx;
						margin-right: 6rpx;
						font-weight: bold;
					}
				}
			}
		}
	}

	.button-block {
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 30rpx;
		width: 100%;
		background: #fff;

		.button {
			width: calc(70% - 16rpx);
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			border-radius: 10rpx;
			background: #0256FF;
			font-weight: bold;
		}

		.button.refuse {
			width: calc(30% - 16rpx);
			color: #000;
			background: #efefef;
			margin-right: 20rpx;
		}
	}
</style>